<template>
	<view class="containar">
		<view class="courseCard" @click="goInfo(item.id)" v-for="item in newsList" :key="item.id">
			<view class="img" :style="'background: url(' + item.pictureUrl + ')'">
			</view>
			<view class="detail">
				<view class="title">{{ item.title }}</view>
				<view class="goods_particulars">
					<view class="particulars_box">
						<view class="goods_particulars_text">点击量:{{ item.clickCount }}</view>
						<view class="Dividing_the_line_vertical"></view>
					</view>
					<view class="particulars_box">
						<view class="goods_particulars_text">分享:{{ item.shareCount }}</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script>

export default {
	data() {
		return {
			newsList: [
				{
					"id": 13,
					"title": "在线理赔“保姆级”教程出炉，让您的理赔快人一步！",
					"pictureUrl": "https://minio.91cloudpay.com:4443/file/bx-24-11-15-00.jpg",
					"clickCount": 5429,
					"shareCount": 689
				},
				{
					"id": 14,
					"title": "开车时听到这种声音，马上停车！",
					"pictureUrl": "https://s3.dova.link:3001/test/20240820/580d3a691bcc4c949f20623b231d5969.jpg",
					"clickCount": 6700,
					"shareCount": 889
				},
				{
					"id": 15,
					"title": "好车主，中华行|“快、简、暖”升级服务，伴您畅行中华",
					"pictureUrl": "https://minio.91cloudpay.com:4443/file/lxxuanchuanhaibao.jpg",
					"clickCount": 14487,
					"shareCount": 356
				},
				{
					"id": 16,
					"title": "5招避免雨天后视镜模糊不清，亲测有效！",
					"pictureUrl": "https://minio.91cloudpay.com:4443/file/bx-24-10-18-16.jpg",
					"clickCount": 16514,
					"shareCount": 1023
				},
				// {
				// 	"id": 17,
				// 	"title": "中国平安财产保险-财产综合险",
				// 	"pictureUrl": "https://yssapp.oss-cn-chengdu.aliyuncs.com/article/1.jpg",
				// 	"clickCount": 3742,
				// 	"shareCount": 10
				// },
				// {
				// 	"id": 18,
				// 	"title": "平安财险——国内货运险",
				// 	"pictureUrl": "https://yssapp.oss-cn-chengdu.aliyuncs.com/article/%E5%9B%BD%E5%86%85%E8%B4%A7%E8%BF%90%E5%B0%81%E9%9D%A2.jpg",
				// 	"clickCount": 4624,
				// 	"shareCount": 10
				// },
				// {
				// 	"id": 19,
				// 	"title": "平安财险——财产基本险",
				// 	"pictureUrl": "https://yssapp.oss-cn-chengdu.aliyuncs.com/article/%E8%B4%A2%E4%BA%A7%E5%9F%BA%E6%9C%AC%E9%99%A9%E5%B0%81%E9%9D%A2.jpg",
				// 	"clickCount": 3165,
				// 	"shareCount": 10
				// },
				// {
				// 	"id": 20,
				// 	"title": "平安财险——财产一切险",
				// 	"pictureUrl": "https://yssapp.oss-cn-chengdu.aliyuncs.com/article/%E8%B4%A2%E4%BA%A7%E4%B8%80%E5%88%87%E9%99%A9%E5%B0%81%E9%9D%A2.jpg",
				// 	"clickCount": 6337,
				// 	"shareCount": 10
				// },
				// {
				// 	"id": 21,
				// 	"title": "平安财险——产品责任险",
				// 	"pictureUrl": "https://yssapp.oss-cn-chengdu.aliyuncs.com/article/%E4%BA%A7%E5%93%81%E8%B4%A3%E4%BB%BB%E5%B0%81%E9%9D%A2.jpg",
				// 	"clickCount": 3343,
				// 	"shareCount": 10
				// },
				// {
				// 	"id": 22,
				// 	"title": "平安财险——出口货运险",
				// 	"pictureUrl": "https://yssapp.oss-cn-chengdu.aliyuncs.com/article/%E5%87%BA%E5%8F%A3%E8%B4%A7%E8%BF%90%E5%B0%81%E9%9D%A2.jpg",
				// 	"clickCount": 63230,
				// 	"shareCount": 10
				// },
				// {
				// 	"id": 23,
				// 	"title": "平安财险）雇主责任险A款",
				// 	"pictureUrl": "https://yssapp.oss-cn-chengdu.aliyuncs.com/article/%E9%9B%87%E4%B8%BB%E8%B4%A3%E4%BB%BBA%E5%B0%81%E9%9D%A2.jpg",
				// 	"clickCount": 84234,
				// 	"shareCount": 10
				// },
				// {
				// 	"id": 24,
				// 	"title": "平安财险——雇主责任险B款",
				// 	"pictureUrl": "https://yssapp.oss-cn-chengdu.aliyuncs.com/article/%E9%9B%87%E4%B8%BB%E8%B4%A3%E4%BB%BBB%E5%B0%81%E9%9D%A2.jpg",
				// 	"clickCount": 3285,
				// 	"shareCount": 10
				// }
			]

		}
	},
	methods: {
		goInfo(id) {
			if (id == 13) {
				uni.navigateTo({ url: '/subpage/wisdomInfo/wisdomInfo13' })
			}
			if (id == 14) {
				uni.navigateTo({ url: '/subpage/wisdomInfo/wisdomInfo14' })
			}
			if (id == 15) {
				uni.navigateTo({ url: '/subpage/wisdomInfo/wisdomInfo15' })
			}
			if (id == 16) {
				uni.navigateTo({ url: '/subpage/wisdomInfo/wisdomInfo16' })
			}
			

		}

	},
	onLoad() {
	}
}

</script>
<style lang="scss" scoped>
.containar {
	.courseCard {
		padding: 14rpx 28rpx;
		border-bottom: 2rpx solid #bfbfbf;
		height: 202rpx;
		display: flex;
		justify-content: flex-start;

		.img {
			height: 192rpx;
			width: 368rpx;
			border-radius: 26rpx;
			background-repeat: no-repeat !important;
			background-size: cover !important;
			background-position: 50% !important;
		}

		.detail {
			margin-left: 16rpx;
			width: 480rpx;

			.title {
				height: 138rpx !important;
				font-size: 24rpx;
				font-weight: 600;
				height: 42rpx;
				margin-bottom: 12rpx;
				overflow: hidden;
				white-space: wrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}

			.goods_particulars {
				margin-top: 12rpx;
				display: flex;
				justify-content: flex-start;

				.particulars_box {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.goods_particulars_text {
						margin-right: 10rpx;
						font-size: 20rpx;
					}

					.Dividing_the_line_vertical {
						margin-right: 10rpx;
						height: 20rpx;
						width: 2rpx;
						background-color: #bfbfbf;
					}
				}
			}
		}
	}
}
</style>